<template>
    <div>
        <h3>房号列表</h3>
        <input type="button" value="添加房号" @click="add">
        <input type="button" value="批量删除" @click="delall">
        <input type="button" value="批量上架" @click="updateall(1)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" value="全选" v-model="checked" @click="checkall"></td>
                    <td>房型名称</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>
                </tr>
                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" :value="item.Id" @change="checkone"></td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.HouseNumber }}</td>
                    <td>{{ item.DescHouse }}</td>
                    <td>{{ item.State == 1 ? "上架" : "下架" }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

const add: any = () => {
    router.push("/addnum");
}

onMounted(() => {
    show();
})

let checked: any = ref(false);

let ids: any = ref([]);

let data: any = reactive({
    list: [],
})

const checkall: any = () => {
    checked.value = !checked.value
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id;
        })
    }
    else {
        checked.value = false;
        ids.value = [];

    }
}
const checkone: any = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

const updateall: any = (state:any) => {
    let f = confirm("确认上架?");
    if (f) {
        if (ids.value.length < 1) {
            alert("至少选择一个");
            return;
        }
        axios({
            url: '/api/House/UpdateStateNumber',
            method: 'put',
            params: { ids: ids.value.toString(),
                state:state
             }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert("修改成功");
                    show();
                    checked.value=false;
                    ids.value=[];
                }
            })
    }
}

const delall: any = () => {
    let f = confirm("确认删除?");
    if (f) {
        if (ids.value.length < 1) {
            alert("至少选择一个");
            return;
        }
        axios({
            url: '/api/House/DelNumber',
            method: 'delete',
            params: { ids: ids.value.toString() }
        })
            .then((res) => {
                if (res.data > 0) {
                    alert("删除成功");
                    show();
                    checked.value=false;
                }
            })
    }
}


const show: any = () => {
    axios({
        url: 'api/House/ShowNumber',
        method: 'get',
    })
        .then((res) => {
            data.list = res.data
        })
}
</script>

<style scoped>
span {
    margin: 0 5px;
}

a {
    margin: 0 10px;
}

input {
    margin: 0 3px;
}
</style>